<template>
	<div class="login-container">
		<p>{{ title }}</p>
		<!-- 输入任意文本 -->
		<van-field v-model="loginForm.username" label="用户名" />
		<!-- 输入手机号，调起手机号键盘 -->
		<van-field v-model="loginForm.password" label="密码" />
		<van-button plain hairline type="primary" @click="login">登录</van-button>
		<p class="tips">用户名：admin ，密码未校验随意填入即可。</p>
	</div>
</template>

<script>
// import { Button } from "vant";

export default {
	components: {
		// [Button.name]: Button
	},
	data() {
		return {
			title: "登录",
			loginForm: {
				username: "",
				password: ""
			}
		};
	},
	watch: {
		$route: {
			handler(route) {
				const query = route.query;
				if (query) {
					this.redirect = query.redirect;
					this.otherQuery = this.getOtherQuery(query);
				}
			},
			immediate: true
		}
	},
	methods: {
		getOtherQuery(query) {
			return Object.keys(query).reduce((acc, cur) => {
				if (cur !== "redirect") {
					acc[cur] = query[cur];
				}
				return acc;
			}, {});
		},
		login() {
			this.$store
				.dispatch("user/login", this.loginForm)
				.then(() => {
					this.$router.push({ path: this.redirect || "/", query: this.otherQuery });
					this.loading = false;
				})
				.catch(() => {
					this.loading = false;
				});
			console.log("login ", this.loginForm);
		}
	}
};
</script>

<style lang="less" scoped>
.login-container {
	text-align: center;

	.tips {
		font-size: 12px;
		color: #eee;
	}
}
</style>
